<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/controls/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> --%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/controls/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" />
<script type="text/javascript">
	SyntaxHighlighter.all();// ueditor代码高亮
	
	function showOtherComment() {
		$(".otherComment").show();
	}
	
	function loadImage() {
		document.getElementById("randImage").src = "${pageContext.request.contextPath}/image.jsp?" + Math.random();
	}
	
	function submitData() {
		var content = $("#content").val();
		var imageCode = $("#imageCode").val();
		
		if(content == null || content == "") {
			alert("请输入评论内容!");
		} else if(imageCode == null || imageCode == "") {
			alert("请输入验证码!");
		} else {
			$.post("${pageContext.request.contextPath}/comment/save.do",{
				"content" : content,
				"imageCode" : imageCode,
				"blog.blogId" : "${blog.blogId}"
			}, function(result) {
				if(result.success) {
					$("#content").val("");
					$("#imageCode").val("");
					alert("评论已提交成功,博主审核后添加!");
					window.location.reload();
				} else {
					alert(result.errorInfo);
				}
			}, "json");
		}
	}
</script>

<div class="data_list">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/img/blog_show_icon.png" />&nbsp;博客信息
	</div>
	<div>
		<div class="blog_title">
			<h3><strong>${blog.title}</strong></h3>
		</div>
		<div class="blog_info">
			<div style="float:left;">
				<strong>标签</strong>
				<c:choose>
					<c:when test="${keywords==null}">
						&nbsp;&nbsp;无
					</c:when>
					<c:otherwise>
						<c:forEach items="${keywords}" var="keyword">
							&nbsp;&nbsp;<a href="${pageContext.request.contextPath}/blog/search.html?q=${keyword}" >${keyword}</a>&nbsp;
						</c:forEach>
					</c:otherwise>
				</c:choose>
			</div>
			<div style="float:right;">
				发布于:&nbsp;[<fmt:formatDate value="${blog.releaseDate}" type="date" pattern="yyyy-MM-dd HH:mm" />] &nbsp;&nbsp;
				博客类别:&nbsp;<a href="${pageContext.request.contextPath}/index.html?blogTypeId=${blog.blogType.blogTypeId}" >${blog.blogType.typeName}</a>&nbsp;&nbsp;
				阅读(${blog.clickHit})&nbsp;&nbsp;评论(${blog.replyHit})
			</div>
		</div>
		<br/><br/>
		
		<div class="xian" style="clear:both; margin:0 auto; border-top: 1px solid #DDD;"></div>
		<div style="line-height:3;background-color: #F8F8FF;">
			<span style="color: #8B2323;">作者: 张亚超&nbsp;&nbsp;&nbsp;&nbsp;尊重博主原创文章，转载请注明文章出处!</span>
		</div>
		<div class="xian" style="clear:both; margin:0 auto; border-top: 1px solid #DDD;"></div>
		<div class="blog_content">${blog.content}</div>
		<div class="xian" style="clear:both; margin:0 auto; border-top: 1px solid #DDD;"></div>
		<div style="margin-top:25px;">${pageCode}</div>
	</div>
</div>

<div class="data_list">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/img/comment_icon.png" />&nbsp;用户评论
		<c:if test="${commentList.size()>10}">
			<a href="javascript:showOtherComment();" style="float:right; padding-right:40px;">显示全部用户评论</a>
		</c:if>
	</div>
	<div class="commentDatas">
		<ul>
			<c:choose>
				<c:when test="${commentList.size()==0}">
					暂无评论
				</c:when>
				<c:otherwise>
					<c:forEach items="${commentList}" var="comment" varStatus="status">
						<c:choose>
							<c:when test="${status.index<10}">
								<div class="comment">
									<span>
										<label>${status.index+1}楼&nbsp;&nbsp;&nbsp;&nbsp;${comment.userIP}</label>
										&nbsp;&nbsp;&nbsp;&nbsp;${comment.content}&nbsp;&nbsp;&nbsp;&nbsp;
										[<fmt:formatDate value="${comment.commentDate}" pattern="yyyy-MM-dd HH:mm" type="date" />]
									</span>
								</div>
							</c:when>
							<c:otherwise>
								<div class="otherComment">
									<span>
										<label>${status.index+1 }楼&nbsp;&nbsp;&nbsp;&nbsp;${comment.userIP}</label>
										&nbsp;&nbsp;&nbsp;&nbsp;${comment.content}&nbsp;&nbsp;&nbsp;&nbsp;
										[<fmt:formatDate value="${comment.commentDate}" pattern="yyyy-MM-dd HH:mm" type="date" />]
									</span>
								</div>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</ul>
	</div>
</div>

<div class="data_list">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/img/publish_comment_icon.png" />&nbsp;发表评论
	</div>
	<div class="publish_comment">
		<div>
			<textarea style="width: 100%; resize: none; height: 190px;" id="content" name="content" placeholder="来说两句吧..."></textarea>
		</div>
		<div class="verCode">
			验证码:<input type="text" value="" id="imageCode" name="imageCode" size="10" onkeydown="if(event.keyCode==13)form1.submit()" />&nbsp;
			<img onclick="javascript:loadImage();" title="换一张试试" id="randImage" src="${pageContext.request.contextPath}/image.jsp" style="width:60px;height:20px;border:1;text-align: center" />
		</div>
		<div class="publishButton">
			<button class="btn btn-primary" type="button" id="publish_comment" onclick="javascript:submitData()">发表评论</button>
		</div>
	</div>
</div>